@import "../css/variable.less";

.layout {
	position: relative;
	height: 100vh;

	&.withnavbar {
		.main {
			margin-left: 0;
		}
	}

	&.fold {
		.sider {
			width: 42px;

			.logo {
				text-align: center; 
				padding-left:0; 
				img {
					//width:28px;
					width: 21px;
					margin: 6px 7px;
					vertical-align: middle;
				}
			}

			.toggleRight > div {
				padding-right: 0;
				text-align: center;
			}

			:global {
				.ant-menu-root {
					width: 100%;
					overflow: visible;

					& > .ant-menu-item {
						padding: 0;
						text-align: center;

						.anticon {
							font-size: 14px;
							margin-right: 0;
						}
					}

					& > .ant-menu-submenu {

						& > .ant-menu-submenu-title {
							padding: 0;
							text-align: center;
							& > i{display: none}
							span {
								i {
									margin-right: 0;
								}
							}

							.anticon {
								font-size: 14px;
								margin-right: 0;
							}

							&::after {
								display: none;
							}
						}
					}
				}
			}
			
		}

		.main {
			margin-left: 42px;
		}
	}

	.sider {
		//width:167px;
		width:214px; 
		background: #15202e;
		position: absolute;
		overflow: visible;
		padding-bottom: 24px;
		height: 100vh;
		transition: @transition-ease-out;
		box-shadow: @shadow-3;
		z-index: 520;
		color: #999;

		&.light {
			background: #fff;

			.switchtheme {
				background: #fff;
				border-top: solid 1px #f8f8f8;
			}
		}

		.logo {
			background-color: #15202e;
			height: 81px;
			cursor: pointer;
			transition: @transition-ease-out;
			overflow: hidden;
			border-bottom: 2px solid #15202e;
			padding-left: 28px; 
			padding-top: 27px; 
			padding-bottom: 33px; 

			img {
				width: 19px;
				margin-right: 8px;
				transition: @transition-ease-out;
				vertical-align: middle;
			}

			span {
				vertical-align: middle;
				font-size: 15px;
				text-transform: uppercase;
				display: inline-block;
				color: #fff;
			}

			.anticon {
				transition: @transition-ease-out;
			}
		}

		.switchtheme {
			visibility: hidden;
			width: 100%;
			position: absolute;
			bottom: 0;
			height: 48px;
			background-color: @dark-half;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 16px 0 24px;
			overflow: hidden;
			z-index: 1000;

			span {
				white-space: nowrap;
				overflow: hidden;
			}

			:global {
				.anticon {
					min-width: 14px;
					margin-right: 8px;
					font-size: 14px;
				}
			}
		}

		.toggleRight {
			background-color: #2e303c;
			height: 70px;
			line-height: 70px;
			text-align: right;
			border-top: 2px solid #445870;
			& > div {
				padding-right: 32px;
			}
			i {
				font-weight: bold;
				cursor: pointer;
			}
		}

		:global {
			.ant-menu-dark,
			.ant-menu-dark .ant-menu-sub {
				color: #999;
			}

			.ant-menu-root {
				height: ~"calc(100vh - 144px)";
				overflow-x: hidden;
				border-right: none;

				&::-webkit-scrollbar-thumb {
					background-color: transparent;
				}

				&:hover {
					&::-webkit-scrollbar-thumb {
						background-color: rgba(0, 0, 0, 0.2);
					}
				}

				& > .ant-menu-submenu {
					border-top: 1px solid transparent;

					&:last-child {
						border-bottom: 1px solid @menu-border-color;
					}
				}

				&.ant-menu-vertical {
					.ant-menu-sub {
						height: 0;
						opacity: 0;
						transition: none;
					}

					.ant-menu-submenu-active {
						.ant-menu-sub {
							height: auto;
							opacity: 1;
						}
					}
				}
			}

			.ant-menu {
				transition: @transition-ease-out;
				&-submenu-inline {
					border-left: 6px solid transparent;
					&.ant-menu-submenu-open {
						border-left: 0 solid transparent; 
						.ant-menu-submenu-inline {
							border-left: 0;
							background-color: @menu-open-bgcolor;
							// &.ant-menu-submenu-inline.ant-menu-submenu > .ant-menu-submenu-title {
							//   &:after {
							//     transform: scale(1) rotate(90deg);
							//   }
							// }
						}
						.ant-menu-inline {
							background-color: @menu-open-bgcolor;
							box-shadow: 0 2px 8px rgba(0, 0, 0, 0) inset;
						}
						 
					    & > .ant-menu-submenu-title{
							span{
								color: #fff;
								i{
									color: #fff;
								}
							}

						}
						& > .ant-menu-submenu-title:after {
							transform: rotate(-90deg) scale(0.75);
							color: #fff;
							-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
						}
					}
				}
				.ant-menu-item,
				.ant-menu-submenu-title {
					overflow: hidden;
					white-space: normal;
					span {
						font-size: 14px;
						color: #a8afb9;
						i {
							margin-right: 15px;
							font-size:16px;
							font-weight: bold;
							vertical-align: middle;
							margin-left:4px; 
						}
					}
				}
				.ant-menu-submenu-title {
					height: 40px;    
					line-height: 40px;    
					&:after {
						font-family: "iconfont" !important;
						font-size:10px;
						font-weight: bold;
						color:#a8afb9;
					}
				}
				.ant-menu-item {
					a {
						font-size: 14px;
						color: #999;
						margin-left: 1px;
					}
					&-selected {
						a {
							color: #fff;
						}
					}
				}
			}
		}


	}

	.main {
		//margin-left: 167px;
		margin-left:214px;
		overflow: auto;
		height: 100vh;
		min-width: 910px;
		transition: @transition-ease-out;

		.container {
			// margin: 24px;
		}

		.content {
			min-height: e("calc(100vh - 114px)");
			position: relative;
			background-color: #ebedee;
			& > :first-child {
				// background: transparent;
				// padding: 24px;
				box-shadow: @shadow-1;
				min-height: e("calc(100vh - 114px)");
			}

			:global {
				.main-tabs{
					// &>.ant-tabs-editable-card {
						&>.ant-tabs-bar {
							// background-color: #fff;
							background-color: #f2f2f2;
							padding-left: 20px;
							border-bottom: 0;
							margin-bottom: 0;
							.ant-tabs-nav{
								padding-left: 16px;
							} 
							.ant-tabs-nav-container {
								margin-bottom: 0;
								//height: 35px;
								height: 24px;
							}
							.ant-tabs-tab:hover i{
								display: block;
							}
							.ant-tabs-tab {
								border: 1px solid #d2d7e0;
								border-bottom: 0;
								color: #999;
								//font-size: 14px;
								font-size: 12px;
								background-color: transparent;
								border-radius: 4px 4px 0 0;
								// padding-right:30px;
								position:relative; 
								//border-bottom: 30px solid #f9f9f9; 
								border-bottom: 30px solid #e9e9e9;
								border-left:16px solid transparent; 
								border-right:16px solid transparent; 
								border-top:0px; 
								height: 0; 
								//padding-top: 5px;
								padding-top: 0; 
								padding-bottom: 0; 
								margin-left:-16px; 
								&.ant-tabs-tab-active {
									background-color: transparent;
									color: #100;
									//border-bottom: 30px solid #ebedee;
									border-bottom: 24px solid #fff; 
									z-index: 2; 
									.anticon-close {
										background: transparent;
										color: #999;
										opacity: 1;     
									}
								}
								.anticon-close {
									position: absolute;
									top: 12px;

									right: 2px;
									padding:2px 3px 1px 1px;

									background: transparent;
									color: #ccc;
									font-size: 9px;
									line-height: 12px;

									letter-spacing: 0;
									margin-top:-5px;

									opacity:1;
									display: none;
								}
								&>div{
									height:0;
									//line-height: 30px;
									line-height: 24px;
								}
							}
						}
						&>.ant-tabs-content {
							//background-color: #ebedee;
							background-color: #fff;
							padding:20px;

							.content-inner {
								// background:#ffffff;
								border:0;
								border-radius:2px;
								// margin: 0 10px 10px;
								// padding: 20px 30px 30px;
							}

						}
						
					// }
				}

			}

		}
	}
}

:global .ant-menu-dark {
	color: #999;
	background-color:#15202e; 

	.ant-menu-submenu-title:hover,
	.ant-menu-submenu:hover {
		color: @primary-color;
	}

	.ant-menu-sub {
		color: #999;
	}

	.ant-menu-submenu-selected {
		color: @primary-color;

		&:not(.ant-menu-submenu-open) {
			// background-color: @dark-half;
			background-color: @menu-open-bgcolor;
			& > .ant-menu-submenu-title{
				span{
					color: #fff;
					i{
						color: #fff;
					}
				}

			}
			& > .ant-menu-submenu-title:after {
				color: #fff;
			}
		}
	}

	.ant-menu-item,
	.ant-menu-submenu-title {
		& > a {
			color: #999;
		}

		&:hover > a {
			color: @primary-color;
		}
	}

	&.ant-menu-inline {		
		.ant-menu-item{
			border-left:4px solid transparent;
			height: 48px;
			line-height: 48px;
		} 
		.ant-menu-item-selected {
			// background-color: @dark-half;
			background-color: @menu-selected-bgcolor;
			border-left:4px solid #4d86ff;
		}
	}

	.ant-menu-item-selected {
		color: @primary-color;
		background-color: @dark-half;
		& > a {
			//color: @primary-color;
			color: #fff;
		}

		&:hover {
			//background-color: @dark-half;
			background-color: #1f3254;
		}
	}
}

.spin {
	:global .ant-spin-container {
		height: 100vh;
	}
}

@media (max-width: 767px) {
	.layout {
		.main {
			.container {
				margin: 12px;
			}

			.bread {
				padding: 0 12px;
			}

			.content {
				min-height: e("calc(100vh - 160px)");
			}

			:global {
				.content-inner {
					padding: 12px;
					min-height: e("calc(100vh - 160px)");
				}
			}
		}
	}
}
